<script setup>
import { ref } from "vue";
import bag from "../assets/mybag/bag-container.png";
import emptyAdd from "../assets/myAds/emptyAdd.png";
import { http } from "../services/service";
import { dateFormat } from "../utils/util";
import { useUserStore } from "../store/index";
import { useI18n } from "vue-i18n";
import question from "../assets/question_cover.png";

const store = useUserStore();
const i18nUse = useI18n();
import { useRouter } from "vue-router";
const router = useRouter();
const back = () => {
  router.go(-1);
};
const value = ref("");
const value1 = ref("");

const show = ref(false);
const sell = () => {
  show.value = true;
};

const cardInfo = ref();

const getCardDetail = (adId) => {
  http.get(`/api/v1/trade/adInfo?adId=${adId}`).then(
    (response) => {
      cardInfo.value = response?.data?.data;
    },
    () => {}
  );
};
const routerCard = JSON.parse(router.currentRoute.value.query.card);
const getCardLists = (id) => {
  http
    .get(
      `/api/v1/trade/adSellList?telegramId=${store.getUser?.telegramId}&adId=${id}`
    )
    .then(
      (response) => {
        const data = response?.data?.data;
        if (response?.data.code === 200) {
          cardListDto.value = data.map((e) => {
            return {
              ...e,
              text: `Odysseus【${e.cardCode}】 ${
                i18nUse.locale.value === "en" ? e.enName : e.zhName
              }`,
              value: e.userCardId,
            };
          });
        }
      },
      () => {}
    );
};
getCardDetail(routerCard.id);
getCardLists(routerCard.id);
const showPicker = ref(false);
const cardListDto = ref([]);
const fieldValue = ref("");
const selected = ref("");
const onConfirm = (e) => {
  showPicker.value = false;
  fieldValue.value =
    i18nUse.locale.value === "en"
      ? e.selectedOptions[0].enName
      : e.selectedOptions[0].zhName;
  selected.value = e.selectedOptions[0];
};
const confirmSell = () => {
  if (!selected.value) {
    return;
  }
  http
    .get(
      `/api/v1/trade/adSell?telegramId=${store.getUser?.telegramId}&adId=${routerCard.id}&userCardId=${selected.value.userCardId}`
    )
    .then((response) => {
      if (response?.data?.code === 200) {
        showToast(i18nUse.t("sell_success"));
        router.push("/trade");
      } else {
        showToast(response.data.message);
      }
    });
};
</script>

<template>
  <van-popup v-model:show="showPicker" round position="bottom">
    <van-picker
      :columns="cardListDto"
      :confirm-button-text="$t('confirm')"
      :cancel-button-text="$t('cancel')"
      @cancel="showPicker = false"
      @confirm="onConfirm"
    />
  </van-popup>
  <van-dialog
    v-model:show="show"
    show-cancel-button
    :confirm-button-text="$t('confirm')"
    :cancel-button-text="$t('cancel')"
    :confirm-button-disabled="!selected"
    cancel-button-color="#95979E"
    @confirm="confirmSell()"
  >
    <div class="withDrawDialog">
      <van-field
        v-model="fieldValue"
        readonly="readonly"
        :label="$t('chose_sell_card')"
        :placeholder="$t('please_choose')"
        @click="showPicker = true"
      />
    </div>
  </van-dialog>
  <div class="container">
    <div style="position: relative">
      <van-icon
        name="arrow-left"
        class="icon-left"
        size="40"
        @click="back()"
        color="#fff"
      />
    </div>
    <div class="img-container">
      <img :src="question" alt="" style="object-fit: fill;" />
    </div>
    <div>
      <div class="withDraw">
        <div class="with-container" style="margin-top: 0">
          <span style="color: #7b7e87"> {{ $t("buyer") }}: </span>
          <span>
            {{ cardInfo?.nickName }}
          </span>
        </div>
        <div class="with-container">
          <span style="color: #7b7e87"> {{ $t("buyer_range") }} </span>
          <span> {{ cardInfo?.currentPriceLimit }} </span>
        </div>
        <div class="with-container">
          <span style="color: #7b7e87"> {{ $t("buyer_time") }} </span>
          <span>
            {{ dateFormat(cardInfo?.createTime || "") }}
          </span>
        </div>
      </div>
    </div>
    <div class="confirm">
      <van-button type="primary" block @click="sell()">{{
        $t("sell")
      }}</van-button>
    </div>
  </div>
</template>

<style scoped lang="less">
.confirm {
  width: 70%;
  margin:20px auto;

  button {
    background-image: linear-gradient(to right, #9ba8ff, #4a61f9);
    border-radius: 10px;
  }
}

.container {
  background: url("../assets/home-page-bg.png");
  width: 100%;
  min-height: 100vh;
  padding-bottom: 100px;
  background-position: center center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-size: cover;
  color: #fff;
}

.van-dialog__cancel {
  background-color: red;
}

.withDraw {
  width: 311px;
  margin: 40px auto 0 auto;
  background: rgba(44, 47, 61, 0.7);
  border-radius: 10px;
  border: 1px solid #9aa7ff;
  min-height: 40px;
  padding: 22px 16px;
  font-size: 16px;

  .with-container {
    display: flex;
    padding: 0 5px;
    justify-content: space-between;
    margin-top: 20px;
    > span {
      display: inline-block;
      white-space: nowrap;
    }
  }
}

.withDrawDialog {
  width: 80%;
  min-height: 40px;
  padding: 22px 16px;
  font-size: 16px;

  .van-cell {
    background-color: unset !important;
    color: #fff !important;

    .van-cell__title {
      color: #fff !important;
    }
  }

  .van-cell__title {
    color: #fff !important;
  }
}

.icon-left {
  padding-left: 16px;
  padding-top: 40px;
  cursor: pointer;
}

.img-container {
  .icon-left {
    position: absolute !important;
    left: 16px;
    top: 40px;
    cursor: pointer;
  }

  width: 80%;
  padding: 22px 16px;
  margin: 20px auto;
  height: 361px;

  img {
    width: 100%;
    height: 100%;
  }
}
</style>
